import React from 'react';
import { inject, observer } from 'mobx-react';
import { Icon, Badge } from 'antd';
import { WeaTools, WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('portalDeskTopStore')
@inject('portalThemeStore')
@observer
class AppMenu extends React.Component {
    constructor(props) {
        super(props);
        this.getUnReadCount = this.getUnReadCount.bind(this);
        this.state = { unReadCount: 0 };
    }

    componentWillMount() {
        const { item } = this.props;
        this.getUnReadCount(item);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.item.unreadapiaddr != this.props.item.unreadapiaddr) {
            this.getUnReadCount(nextProps.item);
        }
    }

    render() {
        const { portalDeskTopStore, portalThemeStore, index, item } = this.props;
        const { bgImageObj, state, setAddState, onDelete } = portalDeskTopStore;
        const { isSetting, isSystemer, menu_w_h } = state;
        const { color = '#fff' } = bgImageObj;
        const { id, menuid, langmenuname, menuicon, url, mobxrouteurl, createtype } = item;
        const { unReadCount } = this.state;

        return (
            <div data-index={index} className="e9desktop-item" style={{ height: menu_w_h }}>
                <div data-id={id}
                  data-menuid={menuid}
                  className="e9desktop-item-icon"
                  title={langmenuname}
                  onMouseOver={
                         (e) => {
                             if (isSetting) {
                                 if (e.target.className == 'e9desktop-item-icon-delete' || e.target.className == 'anticon anticon-cross') {
                                     jQuery(e.currentTarget).find('.e9desktop-item-icon-move').hide();
                                     jQuery(e.currentTarget).find('.icon-coms-Need-feedback').hide();
                                     jQuery(e.currentTarget).find('.e9desktop-item-icon-shadow').hide();
                                 } else if (isSystemer || createtype == 'cus') {
                                         jQuery(e.currentTarget).find('.e9desktop-item-icon-move').show();
                                         jQuery(e.currentTarget).find('.icon-coms-Need-feedback').show();
                                     } else {
                                         jQuery(e.currentTarget).find('.e9desktop-item-icon-shadow').show();
                                     }
                             } else {
                                 jQuery(e.currentTarget).find('.e9desktop-item-icon-shadow').show();
                             }
                         }
                     }
                  onMouseLeave={
                         (e) => {
                             jQuery(e.currentTarget).find('.e9desktop-item-icon-move').hide();
                             jQuery(e.currentTarget).find('.icon-coms-Need-feedback').hide();
                             jQuery(e.currentTarget).find('.e9desktop-item-icon-shadow').hide();
                         }
                     }
                >
                    <div className="e9desktop-item-icon-shadow" onClick={() => portalThemeStore.onLoadMain({ url, mobxrouteurl })} />
                    {
                        !isSetting && unReadCount > 0 ?
                            <div className="e9desktop-item-icon-badge">
                                <Badge ecId={`${this && this.props && this.props.ecId || ''}_Badge@36jvrn`} count={unReadCount}><span /></Badge>
                            </div> : ''
                    }
                    {
                        isSetting ?
                            <div className="e9desktop-item-icon-setting">
                                {isSystemer || createtype == 'cus' ? <div className="e9desktop-item-icon-move" title={getLabel(18381, '拖动排序')} /> : ''}
                                {isSystemer || createtype == 'cus' ? <i className="icon-coms-Need-feedback" title={getLabel(26473, '编辑')} onClick={() => setAddState({ ...item, visible: true })} /> : ''}
                                <div className="e9desktop-item-icon-delete" title={getLabel(91, '删除')}>
                                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@3h0zs0`} type="cross" onClick={() => onDelete(index, item)} />
                                </div>
                            </div> : ''
                    }
                    <img src={menuicon || '/wui/theme/ecology9/image/layout/layout5/desktop-icon-default.png'} alt="" className="e9desktop-item-icon-img" />
                </div>
                <div className="e9desktop-item-name" style={{ color }} title={langmenuname}>
                    <span className="e9desktop-item-menuname" onClick={() => !isSetting && portalThemeStore.onLoadMain({ url, mobxrouteurl })}>{langmenuname}</span>
                </div>
            </div>
        );
    }

    getUnReadCount(item) {
        if (item && item.unreadapiaddr) {
            WeaTools.callApi(item.unreadapiaddr, 'POST').then((result) => {
                const { count = 0 } = result;
                this.setState({ unReadCount: parseInt(count) });
            });
        }
    }
}

export default AppMenu;
